<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Space Invaders</title>
		<link rel="stylesheet" href="css/style.css" />
	</head>

	<body>
		<div id="game-board">
			<div id="start-screen">
				<h1>决战太空</h1>
				<ul id="instruction"></ul>
				<div>
					<input type="text" id="player-name" placeholder="输入玩家昵称" />
					<select name="" id="difficulty">
						<option value="easy">容易</option>
						<option value="medium">中等</option>
						<option value="hard">困难</option>
					</select>

					<button id="start-game-button" disabled>开始游戏</button>
					<button id="clear-data">清除战绩数据</button>
				</div>
				<p>&copy;艺夫作品，用于 JavaScript 教学。2019.07</p>
			</div>
			<div id="battle-field">
				<div id="hero"></div>
				<div id="hero-missiles" class="need-erase"></div>
				<div id="enemies" class="need-erase"></div>
				<div id="explosions" class="need-erase"></div>
				<div id="energy-cans" class="need-erase"></div>
				<div id="ammo-boxes" class="need-erase"></div>
				<div id="info">
					<ul>
						<li>分数: <span id="score"></span></li>
						<li>
							生命:<meter
								id="life-indicator"
								value="100"
								min="0"
								max="100"
								optimum="100"
								high="80"
								low="30"
							></meter
							><span id="life-indicator-text">100%</span>
						</li>
						<li>弹药: <span id="missile-count"></span></li>
						<li>难度: <span id="difficulty-text">容易</span></li>
						<li>p 键: 暂停/恢复</li>
					</ul>
				</div>

				<div id="game-over" style="display: none;">
					<h1>游戏结束!!!</h1>
					<button id="restart-game-button">重新开始</button>
					<table>
						<thead>
							<th>排名</th>
							<th>玩家</th>
							<th>难度</th>
							<th>得分</th>
						</thead>
						<tbody id="rank"></tbody>
					</table>
				</div>
			</div>
		</div>
		<script src="js/game-es5.js"></script>
	</body>
</html>
